<template>
  <div class="tags-container">
    <!--卡片区域 -->
    <el-card>
      <!-- 面包屑 -->
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb" v-if="subjectName">
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{subjectName}}</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 顶部搜索区域 -->
      <el-form :inline="true" :model="tagForm" ref="tagFormRef">
        <el-form-item label="标签名称">
          <el-input v-model="tagForm.tagName"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="tagForm.state" placeholder="请选择" clearable>
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="clearContent">清除</el-button>
          <el-button type="primary" @click="searchTags">搜索</el-button>
        </el-form-item>
        <el-form-item class="add-tags">
          <el-link
            icon="el-icon-back"
            type="primary"
            :underline="false"
            @click="$router.back()"
            v-if="subjectsId"
          >返回学科</el-link>
          <el-button type="success" icon="el-icon-edit" @click="addTagsShow">新建标签</el-button>
        </el-form-item>
      </el-form>
      <!-- alert警告提示区 -->
      <el-alert :title="`数据一共${allTotals}条`" type="info" :closable="false" show-icon></el-alert>
      <!-- table表格区域 -->
      <el-table :data="tagsTableList" style="width: 100%">
        <el-table-column type="index" label="序号" width="120"></el-table-column>
        <el-table-column prop="subjectName" label="所属学科"></el-table-column>
        <el-table-column prop="tagName" label="标签名称"></el-table-column>
        <el-table-column prop="username" label="创建者"></el-table-column>
        <el-table-column prop="addDate" label="创建日期">
          <template slot-scope="scope">{{scope.row.addDate | format}}</template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">{{scope.row.state ? '已启用':'已禁用'}}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link
              type="primary"
              :underline="false"
              @click="changeState(scope.row)"
            >{{scope.row.state ? '禁用':'启用'}}</el-link>
            <el-link
              :type="scope.row.state ? 'info':'primary'"
              :underline="false"
              :disabled="scope.row.state ?true:false"
              @click="editTags(scope.row.id)"
            >修改</el-link>
            <el-link
              :type="scope.row.state ? 'info':'primary'"
              :underline="false"
              :disabled="scope.row.state ?true:false"
              @click="deleteTagsById(scope.row.id)"
            >删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="requestData.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="requestData.pagesize"
        layout="  prev, pager, next,sizes, jumper"
        :total="allTotals"
      ></el-pagination>
    </el-card>
    <!-- 弹出层组件 -->
    <tags-add ref="tagsAddRef" :isEdit="isEdit" :userId="userId" :subjectsId="subjectsId"></tags-add>
  </div>
</template>

<script>
// 导入请求列表数据的请求组件
import { getTagsList, deleteTags, changeTagState } from '@/api/hmmm/tags'
// 导入格式化日期的组件
import { parseTime } from '@/filters'
// 导入添加或修改标签的组件
import TagsAdd from '../components/tags-add'
export default {
  name: 'SubjectsTags',
  data() {
    return {
      tagForm: {}, // 表单对象
      allTotals: 0, // 总数据条数
      tagsTableList: [], // 表格列表数据
      subjectsId: 0, // 科学列表传递过来的id
      requestData: {
        // 请求数据对象
        page: 1,
        pagesize: 10,
        tagName: '',
      },
      isEdit: false,
      userId: 0,
      subjectName: '', // 学科名称
      subjectsId: '', // 学科id
    }
  },
  created() {
    this.getSubjectsId()
    this.loadTagsList()
  },
  watch: {
    subjectsId() {
      this.requestData.subjectID = this.subjectsId
      this.loadTagsList()
    },
  },
  methods: {
    //初始化列表区
    async loadTagsList() {
      try {
        const { data: res } = await getTagsList(this.requestData)
        this.allTotals = res.counts
        this.tagsTableList = res.items
      } catch (error) {
        console.log(error)
        this.$message.error('获取列表失败')
      }
    },
    // 显示条数发生变化调用的函数
    handleSizeChange(val) {
      this.requestData, (pagesize = val)
      this.loadTagsList
    },
    // 页数发生变化的时候调用的函数
    handleCurrentChange(val) {
      this.requestData.page = val
      this.loadTagsList()
    },
    // 点击清除搜索内容
    clearContent() {
      this.tagForm = {}
      // 清空输入框 重新渲染列表
      this.searchTags()
    },
    // 点击搜索表对于的数据
    searchTags() {
      this.requestData.tagName = this.tagForm.tagName
      this.requestData.state = this.tagForm.state
      console.log(this.requestData)
      this.loadTagsList()
    },
    // 删除标签
    async deleteTagsById(id) {
      try {
        const res = await this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        if (res === 'confirm') {
          await deleteTags(id)
        }
        // 渲染列表
        this.loadTagsList()
        // 成功提示
        this.$message.success('删除成功')
      } catch (error) {
        this.$message.info('取消了删除')
      }
    },
    // 切换状态
    async changeState(row) {
      row.state = row.state === 1 ? 0 : 1
      try {
        const res = await changeTagState(row)
        this.$message.success('操作成功')
      } catch (error) {
        this.$message.error('操作失败')
      }
    },
    // 新建标签
    addTagsShow() {
      this.$refs.tagsAddRef.showDialog()
      this.isEdit = false
    },
    // 修改标签
    editTags(id) {
      this.$refs.tagsAddRef.showDialog()
      this.isEdit = true
      this.userId = id
    },
    // 获取从学科列表传递过来的参数
    getSubjectsId() {
      this.subjectsId = this.$route.query.id
      this.subjectName = this.$route.query.name
      console.log(this.subjectsId)
    },
  },
  components: { TagsAdd },
  // 过滤器
  filters: {
    format(value) {
      return parseTime(value)
    },
  },
}
</script>

<style scoped lang='less'>
.add-tags {
  float: right;
}
.el-alert {
  margin-bottom: 15px;
}
.el-link {
  margin-right: 12px;
}
.el-pagination {
  margin-bottom: 15px;
  margin-top: 15px;
  float: right;
}
.breadcrumb {
  margin-bottom: 15px;
}
</style>
